<template>
  <div class="userWrapper">
    <van-nav-bar title="小兵" left-arrow @click-left="$router.go(-1)">
      <template #right>
        <van-icon name="ellipsis" />
      </template>
    </van-nav-bar>
    <!-- 基本信息 -->
    <div class="essentialInformation">
      <div class="userIcon">
        <img :src="datas.photo" alt="" />
      </div>
      <div class="info">
        <div class="info-top">
          <div class="publish item">
            <div class="number">{{ datas.art_count }}</div>
            <p>发布</p>
          </div>
          <div class="publish item">
            <div class="number">{{ datas.follow_count }}</div>
            <p>关注</p>
          </div>
          <div class="publish item">
            <div class="number">{{ datas.fans_count }}</div>
            <p>粉丝</p>
          </div>
          <div class="publish item">
            <div class="number">{{ datas.like_count }}</div>
            <p>获赞</p>
          </div>
        </div>
        <div class="info-bottom">
          <van-button
            type="primary"
            :loading="attentionLoading"
            @click="isAttention(datas.is_following)"
            >{{ datas.is_following ? "已关注" : "关注" }}</van-button
          >
        </div>
      </div>
    </div>
    <!-- 官方认证以及简介 -->
    <div class="synopsis">
      <div class="authentication">
        认证:
        <p>{{ datas.certi }}</p>
      </div>
      <div class="intro">
        简介:
        <p>{{ datas.intro }}</p>
      </div>
    </div>
    <!-- 文章列表 -->
    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
    >
      <van-cell v-for="item in list" :key="item.art_id.toString()">
        <div class="articleList">
          <div class="title">
            <div class="photo">
              <img :src="datas.photo" alt="" />
            </div>
            <div class="title-content">
              <div class="authors">{{ datas.name }}</div>
              <div class="release-time">{{ item.pubdate |formatDate }}</div>
            </div>
          </div>
          <div class="article-comtent">
            {{ item.title }}
          </div>
          <div class="picture">
            <img
              v-for="(sub, index) in item.cover.images"
              :key="index"
              :src="sub"
            />
          </div>
          <div class="operation">
            <van-grid direction="horizontal" :column-num="3">
              <van-grid-item text="评论">
                <div slot="icon" class="toutiao toutiao-pinglun"></div>
              </van-grid-item>
              <van-grid-item text="点赞">
                <div slot="icon" class="toutiao toutiao-dianzan"></div>
              </van-grid-item>
              <van-grid-item text="收藏">
                <div slot="icon" class="toutiao toutiao-shoucang"></div>
              </van-grid-item>
            </van-grid>
          </div>
        </div>
      </van-cell>
    </van-list>
  </div>
</template>

<script>
import {
  getUserById,
  getArticlesByUser,
  addAttention,
  cancelAttention
} from '@/api/homepage/articleLists.js'
export default {
  data () {
    return {
      datas: {},
      list: [],
      loading: false,
      finished: false,
      page: 1,
      perPage: 10,
      attentionLoading: false // 关注接口值没返回是的loading状态
    }
  },
  props: {
    userId: {
      type: [Number, String],
      require: true
    }
  },
  mounted () {
    this.getUserByIds()
  },
  methods: {
    async getUserByIds () {
      const { data } = await getUserById(this.userId)
      this.datas = data.data
    },
    async onLoad () {
      // 异步更新数据
      try {
        const params = {
          page: this.page,
          per_page: this.perPage
        }
        const { data } = await getArticlesByUser(this.userId, params)
        console.log(data.data.results)
        this.list = [...this.list, ...data.data.results]
        this.loading = false
        this.page++
        if (data.data.results.length < 1) {
          this.finished = true
        }
      } catch (error) {
        console.log(error)
      }
    },
    // 关注
    async isAttention (isFollowing) {
      try {
        this.attentionLoading = true
        if (!isFollowing) {
          // 添加关注
          await addAttention(this.userId)
          this.datas.is_following = !this.datas.is_following
        } else {
          // 取消关注
          await cancelAttention(this.userId)
          this.datas.is_following = !this.datas.is_following
        }
        this.attentionLoading = false
      } catch (error) {
        console.log(error)
        this.attentionLoading = false
      }
      // this.$emit("changeIsAttention", this.$attrs.isAttention);
    }
  }
}
</script>

<style lang="less" scoped>
@import url(./index.less);
</style>
